import '../tab_title/tab_title.css'
import template from '../tab_title/tab_title.tet'
const tab_title = document.querySelector('#tab-title')
tab_title.innerHTML = template

import add_tab_content from '../tab_content/tab_content'
import { del } from '../tab_content/tab_content'

const ul = tab_title.children[0]
let arr = new Set()

//接收左侧导航栏的传入的信息
export default (template, title) => {
  //将信息放入arr
  arr.add(title)
  //将数据渲染
  render(template, title)
}


function render(template, title) {
  ul.innerHTML = ''
  arr.forEach(item => {
    const li = document.createElement('li')
    const i = document.createElement('i')
    //判断左侧点击内容是否已存在在数组
    if (item == title) {
      //如果存在就加上属性
      li.classList.add('active')
    }
    li.innerHTML = item

    li.onclick = function () {
      [...ul.children].forEach(item => {
        // 点击右侧标签时把所有的标签的属性都清除，再给当前点击的标签加上属性
        item.classList.remove('active')
      })
      li.classList.add('active')
      //将标签内容和属性传入内容界面
      add_tab_content(template, li.innerText)
    }
    i.onclick = function (e) {
      e.stopPropagation();
      const currentLi = e.target.parentElement;
      //点击关闭标签时判断当前标签是否为选中标签，
      // 如果被选中标签判断当前标签左右有无标签，
      // 如果有就让左/右 标签变为选中，并把标签内容和属性传入内容界面
      if (currentLi.classList.contains('active')) {
        if (currentLi.previousElementSibling) {
          currentLi.previousElementSibling.classList.add('active');
          add_tab_content(currentLi.previousElementSibling.dataset.template, currentLi.previousElementSibling.innerText);
        }
        else if (currentLi.nextElementSibling) {
          currentLi.nextElementSibling.classList.add('active');
          add_tab_content(currentLi.nextElementSibling.dataset.template, currentLi.nextElementSibling.innerText);
        }
        //关闭标签时，如果被选中的标签左右都没有标签则打开欢迎页
        else {
          add_tab_content('welcome');
        }
      }
      //将li标签和对应的内容给上相同属性用于删除
      currentLi.dataset.name = item
      //关闭标签
      currentLi.remove();
      //清除arr数组中的数据
      arr.delete(currentLi.innerText)
      //将li标签内容传给内容界面
      del(item)
    }
    li.appendChild(i)
    ul.appendChild(li)
  })
}

